<template>
  <div id="CompanyIntroduction">
    <div class="banner container-fuild text-center">需求云库</div>
    <div class="container">
      <div class="row CompanyIntroduction-container">
        <div class="col-xs-6 col-sm-6 col-md-3 wow zoomIn">
          <img
            class="img-responsive center-block"
            src="@/assets/img/about_img.png"
          />
        </div>
        <div class="col-xs-18 col-sm-18 col-md-9">
          <van-card>
            <template #tags>
              <div class="center warp">
                <span class="center l_box">
                  需求类型:
                  <van-button type="info" size="mini" class="ml"
                    >不限</van-button
                  >
                </span>
                <div class="r_box">
                  <span class="ml cus hui" v-for="i in 10" :key="i"
                    >技术需求</span
                  >
                </div>
              </div>
              <div class="center warp mt2">
                <span class="center l_box">
                  技术领域:
                  <van-button type="info" size="mini" class="ml"
                    >不限</van-button
                  >
                </span>
                <div class="r_box">
                  <span class="ml cus hui" v-for="i in 10" :key="i">生物</span>
                </div>
              </div>
              <div class="center warp mt2">
                <span class="center l_box">
                  投入资金:
                  <van-button type="info" size="mini" class="ml"
                    >不限</van-button
                  >
                </span>
                <div class="r_box">
                  <span class="ml cus hui" v-for="i in 10" :key="i"
                    >1-10万</span
                  >
                </div>
              </div>
              <div class="center warp mt2">
                <span class="center l_box">
                  所在地区:
                  <van-button type="info" size="mini" class="ml"
                    >不限</van-button
                  >
                </span>
                <div class="r_box">
                  <span class="ml cus hui" v-for="i in 10" :key="i">北京</span>
                </div>
              </div>
              <!-- <van-search class="mt2" style="width:50%" v-model="key_w" placeholder="更多搜索" /> -->
              <van-search
                v-model="key_w"
                show-action
                :clearable="false"
                label="更多搜索"
                placeholder="请输入搜索关键词"
                @search="onSearch"
                @clear="onClear"
                style="width: 50%"
                class="mt"
              >
                <template #action>
                  <div @click="onSearch2">搜索</div>
                </template>
              </van-search>
            </template>
          </van-card>

          <van-divider />

          <van-row>
            <van-col span="18">
              <div class="list_card van-hairline--surround mt2" v-for='i in 5' :key='i'>
                <div class="list_card_top">房产电子商务平台</div>
                <div class="van-multi-ellipsis--l3 mt">
                  上面这段代码async中使await
                  摇色子()先执行，等到三秒后执行完再把得到的结果赋值给左边的n，也就是说test函数需要三秒钟才执行完成，所以test函数是异步的，因此前面必须写async
                  上面这段代码async中使await
                  摇色子()先执行，等到三秒后执行完再把得到的结果赋值给左边的n，也就是说test函数需要三秒钟才执行完成，所以test函数是异步的，因此前面必须写async
                </div>
                <van-divider />
                <div class="row_bw mbt">
                  <span class="glyphicon glyphicon-tags" aria-hidden="true"
                    ><span class="ml">信息</span></span
                  >
                  <span
                    class="glyphicon glyphicon glyphicon-map-marker"
                    aria-hidden="true"
                    ><span class="ml">湖北省</span></span
                  >
                  <span
                    class="glyphicon glyphicon glyphicon-calendar"
                    aria-hidden="true"
                    ><span class="ml">发布日期</span></span
                  >
                </div>
              </div>
            </van-col>
            <van-col span="6">
                <img class="mt2 " src="@/assets/img2/img.png"/>
            </van-col>
          </van-row>
        </div>
      </div>
    </div>
  </div>
</template>
<script>
import { WOW } from "wowjs";
export default {
  name: "Demand",
  data() {
    return {
      key_w: "",
    };
  },
  mounted() {
    var wow = new WOW();
    wow.init();
  },
  methods: {
    onClear() {
      console.log("23");
      this.key_w = "";
    },
    onSearch2(e) {
      console.log("e:", e, this.key_w);
    },
    onSearch(e) {
      console.log(e);
    },
  },
};
</script>
<style scoped>
.list_card {
  padding: 5px;
}
.list_card_top {
  background-color: #4f4f4f;
  color: white;
  padding: 10px;
}

.l_box {
  width: 15%;
}
.r_box {
  width: 80%;
}
.center {
  display: flex;
  align-items: center;
}
.banner {
  color: #fff;
  font-size: 30px;
  height: 150px;
  line-height: 150px;
  background-image: url("../assets/img/banner1.png");
  background-repeat: no-repeat;
  background-size: cover;
  background-attachment: scroll;
  background-position: center center;
}
.row {
  margin-right: 0;
  margin-left: 0;
}
.CompanyIntroduction-container {
  padding: 100px 0;
  color: #808080;
  transition: all ease 0.5s;
}
.CompanyIntroduction-container > div > p {
  font-size: 14px;
  line-height: 2.5rem;
}
@media screen and (max-width: 997px) {
  .CompanyIntroduction-container {
    padding: 10px 0;
    color: #808080;
  }
}
</style>

